<template>
  <view class="footer" id="footer">
    <view class="voiceInput flex alignCenter justifyBetween">
      <view class="voice" @click="isVoiceInput = !isVoiceInput">
        <uv-image v-if="!isVoiceInput" src="https://oss.seenlove.com/images/6702b9533f84971bcbe85a05eca59139.png" width="25px" height="25px"></uv-image>
        <uv-image v-else src="https://oss.seenlove.com/images/806e018a094734c2f69c501a2b2aa769.png" width="25px" height="25px"></uv-image>
      </view>
      <view class="input">
        <chatSpeech v-if="isVoiceInput" ref="chatSpeech" v-model="audio"></chatSpeech>
        <uv-input @confirm="confirm" v-else :customStyle="customStyle" placeholder="说点什么吧～" border="none" v-model="content" shape="circle"></uv-input>
      </view>
      <view class="more shrink flex alignCenter">
        <view v-if="!isEmoj" @click.stop="isMoreViewShowClick('emo')" style="margin-right: 8px">
          <uv-image @load="setCss" src="/static/chat/emo.png" width="25px" height="25px"></uv-image>
        </view>
        <view v-else @click="showInput" style="margin-right: 8px">
          <uv-image src="/static/chat/text.png" width="25px" height="25px"></uv-image>
        </view>

        <view @click="isMoreViewShowClick">
          <uv-image @load="setCss" src="https://oss.seenlove.com/images/93a40197c294b7f487fdaf5fcb0e75df.png" width="25px" height="25px"></uv-image>
        </view>
      </view>
    </view>
    <!-- <view class="more-view grids gridColumns3" :style="{ height: isMoreViewShow ? 'auto' : '0' }">
      <view class="box" @click="moreClick(index)" v-for="(item, index) in moreAction" :key="index">
        <view class="icon">
          <image :src="item.icon" mode="widthFix" />
        </view>
        <view class="name">{{item.name}}</view>
      </view>
    </view> -->

    <!-- 表情 -->
    <view class="more-view" :class="{emos:isEmoj}" :style="{ height:moreViewStyle }">
      <view v-if="isEmoj" class="grids gridColumns6 emoBox">
        <view @click="sendEmo(item)" class="textCenter emo" v-for="(item,index) in emojData" :key="index">{{item}}</view>
        <view class="actionEMO flex alignCenter">
          <view @click="strDel" class="strDel">
            <uv-button icon="backspace" :disabled="!content"></uv-button>
          </view>
          <uv-button text="发送" @click="confirm" :disabled="!content" color="#9E2AFF"></uv-button>
        </view>
      </view>
      <view v-else class="grids gridColumns3">
        <view class="box" @click.stop="moreClick(index)" v-for="(item, index) in moreAction" :key="index">
          <view class="icon">
            <image :src="item.icon" mode="widthFix" />
          </view>
          <view class="name">{{item.name}}</view>
        </view>
      </view>
    </view>

  </view>
</template>

<script setup lang="ts">
import chatSpeech from "@/packagePages/chatIm/components/chatSpeech.vue";
import useCounterStore from "@/stores/counter";
const counter = useCounterStore();
const instance = getCurrentInstance();
const { proxy } = getCurrentInstance();
const emit = defineEmits([
  "sendMessage",
  "sendAudioMsg",
  "sendImageMsg",
  "getChatActionHeight",
  "sendAddressMsg",
  "saveDiamond",
  "sendCustomMsg",
]);

let isVoiceInput = ref(false); //是否正在录音
let isMoreViewShow = ref(false);
let content = ref("");
let audio = ref(""); //音频
let customStyle = ref({
  background: "#F6F6F6",
  padding: "5px 0 5px 15px",
});
let btnStyle = ref({
  width: "200px",
});
let sendImage = ref(""); //发送图片
let moreAction = ref([
  {
    name: "图片",
    icon: "https://oss.seenlove.com/images/de38cbc1a3d44f63454588f07ca55c10.png",
  },
  {
    name: "位置",
    icon: "https://oss.seenlove.com/images/fd34bf36a3d97751e192c38caa6d69b9.png",
  },
]);
let coin = ref(1); //购买钻石数量
let loading = ref(false); //购买钻石loading
let isEmoj = ref(false);
let emojData = ref([
  "🤞",
  "👍",
  "👏",
  "❤",
  "😁",
  "🖐",
  "😀",
  "😃",
  "😄",
  "😁",
  "😆",
  "😅",
  "😂",
  "🤣",
  "😊",
  "😇",
  "🙂",
  "🙃",
  "😉",
  "😌",
  "😍",
  "🥰",
  "😘",
  "😗",
  "😙",
  "😚",
  "😋",
  "😛",
  "😝",
  "😜",
  "🤪",
  "🤨",
  "🧐",
  "🤓",
  "😎",
  "🤩",
  "🥳",
  "😏",
  "😒",
  "😞",
  "😔",
  "😟",
  "😕",
  "🙁",
  "😣",
  "😖",
  "😫",
  "😩",
  "🥺",
  "😢",
  "😭",
  "😤",
  "😠",
  "😡",
  "🤬",
  "🤯",
  "😳",
  "🥵",
  "🥶",
  "😱",
  "😨",
  "😰",
  "😥",
  "😓",
  "🤗",
  "🤔",
  "🤭",
  "🤫",
  "🤥",
  "😶",
  "😐",
  "😑",
  "😬",
  "🙄",
  "😯",
  "😦",
  "😧",
  "😮",
  "😲",
  "😴",
  "🤤",
  "😪",
  "😵",
  "🤐",
  "🥴",
  "🤢",
  "🤮",
  "🤧",
  "😷",
  "🤒",
  "🤕",
  "🤑",
  "🤠",
  "👻",
  "🐧",
]);

let moreViewStyle = computed(() => {
  if (isMoreViewShow.value) {
    if (isEmoj.value) {
      return "200px";
    } else {
      return "auto";
    }
  } else {
    return 0;
  }
});

//发送信息
async function confirm() {
  if (!content.value) return;
  let text = await proxy.$apis.prohibitedWords({ textContent: content.value });
  emit("sendMessage", text);
  content.value = "";
}

//发送语音
function sendAudioMsg() {
  emit("sendAudioMsg", audio.value);
  setTimeout(() => {
    audio.value = "";
  }, 1000);
}

//发送图片
function sendImageMsg(array) {
  array.forEach(async (element) => {
    await emit("sendImageMsg", element);
  });
  sendImage.value = "";
}

function sendEmo(e) {
  content.value = content.value + "" + e;
}

function strDel() {
  let str = content.value;
  content.value = removeLastCharacter(str);
  function removeLastCharacter(str) {
    let strArr = Array.from(str);
    strArr.pop();
    return strArr.join(""); //将数组还原成字符串
  }
}

async function moreClick(index) {
  if (index == 0) {
    let resp = await proxy.$auth.chooseImage(9);
    sendImageMsg(resp);
  } else if (index == 1) {
    let resp = await proxy.$auth.chooseLocation();
    emit("sendAddressMsg", resp);
  } else {
    counter.getUserData();
    instance.refs.popup.open();
  }
}

function showInput() {
  isEmoj.value = false;
  isMoreViewShow.value = false;
}

function isMoreViewShowClick(e?) {
  isEmoj.value = false;
  if (e && proxy.$utils.isString(e)) {
    isEmoj.value = true;
    isVoiceInput.value = false;
  }
  isMoreViewShow.value = !isMoreViewShow.value;

  nextTick(() => {
    setCss();
  });
}

function setCss() {
  nextTick(async () => {
    let footerHeight = await viewInfo("#footer", "height");
    emit("getChatActionHeight", footerHeight);
  });
}

//获取页面元素信息
function viewInfo(id, type) {
  return new Promise((resolve, reject) => {
    uni
      .createSelectorQuery()
      .in(instance)
      .select(id)
      .boundingClientRect((data) => {
        if (data) {
          resolve(data[type]);
        } else {
          resolve(0);
        }
      })
      .exec();
  });
}

watch(
  () => audio.value,
  (newValue, oldValue) => {
    if (newValue) sendAudioMsg();
  },
  { deep: true, immediate: true }
);
</script>



<style lang="scss" scoped>
.footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: white;
}
.voiceInput {
  padding: 10px 15px 25px 15px;
  .input {
    width: 100%;
    margin: 0 10px;
  }
}
.emos {
  overflow-y: auto;
  padding: 10px 0 15px;
  .emo {
    padding-bottom: 10px;
  }
}
.more-view {
  background-color: #f6f6f6;
  .emoBox {
    position: relative;
    .actionEMO {
      position: fixed;
      right: 15px;
      bottom: 25px;
      z-index: 1;
      .strDel {
        background-color: white;
        margin-right: 8px;
      }
    }
    .emo {
      font-size: 25px;
    }
  }
  .box {
    padding: 10px 0 25px;
    .icon {
      width: 60px;
      aspect-ratio: 1/1;
      margin: auto;
      image {
        display: block;
        width: 100%;
        height: 100%;
      }
    }
    .name {
      font-family: Microsoft YaHei;
      font-size: 12px;
      font-weight: 400;
      line-height: 12px;
      letter-spacing: 0.20000000298023224px;
      color: #8a8a8a;
      margin-top: 10px;
      text-align: center;
    }
  }
}
.content {
  padding: 15px 15px 25px 15px;
  .title {
    text {
      color: #8a8a8a;
    }
    .buy {
      background: linear-gradient(
        to right,
        rgba(252, 137, 254, 1),
        rgba(49, 82, 255, 1)
      );
      border: 1px solid #151d33;
      border-radius: 24px;
      line-height: 26px;
      text-align: center;
      font-size: 12px;
      color: white;
      padding: 3px 15px;
    }
  }
  .diamond {
    width: 40%;
    margin: 5px auto 15px;
    image {
      display: block;
    }
  }
}
</style>
